<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Author" content="Real">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>cover</title>
	<link rel="stylesheet" href="../reset.css">
	<link rel="stylesheet" href="edit.css">
	<style type="text/css"></style>
</head>
<body>
<div class="wrap flexbox">
	<div class="mainleft flex">
		<div class="ml-myinfo module">
			<h3>基本信息</h3>
			<div class="savebox"><span class="com-save">保存</span></div>
			<div class="editbox"><span class="com-edit">编辑</span></div>
			<div class="addbox">
				<span class="add addMyinfo">+</span>
			</div>
		</div>
		<div class="ml-edu module">
			<h3>教育经历</h3>
			<div class="savebox"><span class="com-save">保存</span></div>
			<div class="editbox"><span class="com-edit">编辑</span></div>
			<div class="addbox">
				<span class="add addEdu">+</span>
			</div>	
		</div>
		<div class="ml-exp module">
			<h3>工作经历</h3>
			<div class="savebox"><span class="com-save">保存</span></div>
			<div class="editbox"><span class="com-edit">编辑</span></div>
			<div class="addbox">
				<span class="add addExp">+</span>
			</div>
		</div>		
	</div>
	<div class="photobox">
		<img src="" class="photo">
		<input type="file" name="photo" class="input-file">
	</div>
	<a href="show/show.html" target="_blank" class="bigButton">保存查看</a>
	<div class="cover2">
		<ul class="title-wrap">
			<li class="cover-title">基本信息</li>
			<li class="cover-title">教育经历</li>
			<li class="cover-title">工作经历</li>
			<li class="cover-title">职业技能</li>
			<li class="cover-title">作品展示</li>
			<li class="cover-title">求职意向</li>
		</ul>
	</div>
	<div class="cover">
		<h4 class="lefttop">基本信息</h4>
		<h4 class="leftmiddle">教育经历</h4>
		<h4 class="leftbottom">工作经历</h4>
		<h4 class="righttop">职业技能</h4>
		<h4 class="rightmiddle">作品展示</h4>
		<h4 class="rightbottom">求职意向</h4>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="550">
			<path id="svg_0" d="m250,110c-29.27023,88.82002 47.38206,90.83865 3.02796,183.69595c-44.3541,92.8573 23.99068,163.62434 -7.07455,221.27663" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#3385FF" fill="none" class="path"/>
			<path id="svg_1" d="m248,180c0,0 -42.391374,20.186368 -65.605697,-21.195687" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#3385FF" fill="none" class="path2"/>
			<path id="svg_2" d="m267,246.26c32.298189,-23.214323 41.382055,10.093184 65.605697,-20.186368" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#3385FF" fill="none" class="path2"/>
			<path id="svg_3" d="m247,307.83c-38.354099,-29.270234 -52.484557,12.111821 -71.661607,-24.223642" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#3385FF" fill="none" class="path2"/>
  			<path id="svg_4" d="m237,367.4c44.41001,13.121139 36.335463,-21.195687 75.698881,-31.288871" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#3385FF" fill="none" class="path2"/>
  			<path id="svg_5" d="m254,471c15.29819,-20.21433 30.38205,-22.90682 56.60569,-21.18637" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#3385FF" fill="none" class="path2"/>
  			<path id="svg_6" d="m246,427c-30.3541,-27.27024 -34.48455,3.11182 -65.6616,-23.22364" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#3385FF" fill="none" class="path2"/>
  			<rect id="svg_7" height="40" width="120" y="136" x="64" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="#3385FF" class="shakel"/>
  			<rect id="svg_8" height="40" width="120" y="265" x="57" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="#3385FF" class="shakel"/>
  			<rect id="svg_9" height="40" width="120" y="210" x="331" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="#3385FF" class="shaker"/>
  			<rect id="svg_10" height="40" width="120" y="316" x="311" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="#3385FF" class="shaker"/>
  			<rect id="svg_11" height="40" width="120" y="380" x="62" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="#3385FF" class="shaker"/>
  			<rect id="svg_12" height="40" width="120" y="430" x="310" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="#3385FF" class="shaker"/>
		</svg>
	</div>
	<div class="mainright flex">
		<div class="mr-skills module">
			<h3>职业技能</h3>
			<div class="savebox"><span class="com-save">保存</span></div>
			<div class="editbox"><span class="com-edit">编辑</span></div>
			<div class="addbox box-skill">
				<span class="add addSkill">+</span>
			</div>			
		</div>
		<div class="mr-demo module">
			<h3>作品展示</h3>
			<div class="savebox"><span class="com-save">保存</span></div>
			<div class="editbox"><span class="com-edit">编辑</span></div>
			<div class="addbox box-demo">
				<span class="add addDemo">+</span>
			</div>			
		</div>
		<div class="mr-expect module">
			<h3>求职意向</h3>
			<div class="savebox"><span class="com-save">保存</span></div>
			<div class="editbox"><span class="com-edit">编辑</span></div>
			<div class="addbox">
				<span class="add addExpect">+</span>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="edit.js"></script>
<script type="text/javascript" src="info.js"></script>
<script type="text/javascript">
// 增加头像
function previewImg(){
	var fileInput = document.querySelector('input[type=file]');
	var previewImg = document.querySelector('img');
	fileInput.addEventListener('change', function () {
	    var file = this.files[0];
//Dom API FileReader类读取文件
	    var reader = new FileReader();
	    reader.addEventListener("load", function () {
	        previewImg.src = reader.result;
	        var imgWrap = [];
	        imgWrap.push(reader.result);
//API window.localStorage保存文件到浏览器
	        var lstorage=window.localStorage;
	        var objimg = JSON.stringify(imgWrap);
        	lstorage.setItem("imginfo",objimg);
	    }, false);
	    reader.readAsDataURL(file);
	    previewImg.style.display = "block";
	    fileInput.style.display = "none";
	}, false);
}
previewImg();

// skills
var oMm = document.querySelector(".mr-skills");
var oAddSkill = document.querySelector(".addSkill");
var addone = true;
// var skillsnum = 10;
oAddSkill.onclick = function(){
	var oBackg = backGround(oMm);
	var info = addSkill(oBackg);
	info[0].addEventListener("click",function(){
		oMm.removeChild(oBackg);
	})
	var oIntext = oMm.querySelectorAll('input[type="text"]')[0];
	oIntext.onchange = function(){
		if(oIntext.value != ""||oIntext.value != null){
			info[1].addEventListener("click",function(){
				oMm.removeChild(oBackg);
				var oSbox = new Editbox(oMm);
				var sKillName = oIntext.value;
					var a = new SliderRange(sKillName,oSbox,oMm);									
			})
		}
	}
}
// edu
var oMledu = document.querySelector(".ml-edu");
var oAddEdu = document.querySelector(".addEdu");
var innerEdu = "";
innerEdu += '<div class="context"><span>时间：</span><input type="text" class="input" name="edu-time" placeholder="2012.09~2016.07"></div>';
innerEdu += '<div class="context"><span>学校：</span><input type="text" class="input" name="edu-school"></div>';
innerEdu += '<div class="context"><span>学历：</span><input type="text" class="input" name="edu-degree"></div>';
innerEdu += '<div class="context"><span>专业：</span><input type="text" class="input" name="edu-major"></div>';
innerEdu += '<div class="context"><span>其他：</span><input type="text" class="input" name="edu-honor" placeholder="多个请用空格隔开"></div>';
var objEdu = {
	oMain:oMledu,
	oAdd:oAddEdu,
	innerh:innerEdu,
	title:"添加教育经历",
	cls:"enter-edu"
}
addSection(objEdu,eduData);
// exp
var oMlexp = document.querySelector(".ml-exp");
var oAddExp = document.querySelector(".addExp");
var innerExp = "";
	innerExp += '<div class="context"><span>时间：</span><input type="text" class="input" name="exp-time" placeholder="2012.09~2016.07"></div>';
	innerExp += '<div class="context"><span>公司：</span><input type="text" class="input" name="exp-company"></div>';
	innerExp += '<div class="context"><span>职位：</span><input type="text" class="input" name="exp-position"></div>';
	innerExp += '<div class="context"><span>工作内容：</span><textarea class="textarea input"></textarea></div>';
var objExp = {
	oMain:oMlexp,
	oAdd:oAddExp,
	innerh:innerExp,
	title:"添加工作经历",
	cls:"enter-exp"
}
addSection(objExp,expData);

// myinfo
var oMlMyinfo = document.querySelector(".ml-myinfo");
var oAddMyinfo = document.querySelector(".addMyinfo");
var innerMyinfo = "";
	innerMyinfo += '<div class="context"><span class="justify">姓名</span><span>：</span><input type="text" class="input" name="myinfo-name"></div>';
	innerMyinfo += '<div class="context"><span class="justify">性别</span><span>：</span><input type="text" class="input" name="myinfo-gender"></div>';
	innerMyinfo += '<div class="context"><span class="justify">最高学历</span><span>：</span><input type="text" class="input" name="most-degree"></div>';
	innerMyinfo += '<div class="context"><span class="justify">工作年限</span><span>：</span><input class="input" name="myinfo-years"></div>';
	innerMyinfo += '<div class="context"><span class="justify">所在城市</span><span>：</span><input class="input" name="city"></div>';
	innerMyinfo += '<div class="context"><span class="justify">联系电话</span><span>：</span><input class="input" name="phone"></div>';
	innerMyinfo += '<div class="context"><span class="justify">联系邮箱</span><span>：</span><input class="input" name="email"></div>';

var objMyinfo = {
	oMain:oMlMyinfo,
	oAdd:oAddMyinfo,
	innerh:innerMyinfo,
	title:"添加个人信息",
	cls:"enter-myinfo"
}
addSection(objMyinfo,myinfoData);

// myexpect
var oMrExpect = document.querySelector(".mr-expect");
var oAddExpect = document.querySelector(".addExpect");
var innerExpect = "";
	innerExpect += '<div class="context"><p>工作类型：</p><input type="text" name="jobtaye" class="input">';
	innerExpect += '<select class="input select"><option value ="全职">全职</option><option value ="实习">实习</option>';
	innerExpect += '<option value ="兼职">兼职</option></select></div>';
	innerExpect += '<div class="context"><span>期望城市：</span><input type="text" name="city" placeholder="深圳" class="input"></div>';
	innerExpect += '<div class="context"><span>期望月薪：</span><input type="text" name="pay" placeholder="4K-8K" class="input"></div>';
	innerExpect += '<div class="context"><span>补充说明(若有)</span><textarea class="textarea input"></textarea></div>';

var objExpect = {
	oMain:oMrExpect,
	oAdd:oAddExpect,
	innerh:innerExpect,
	title:"添加工作期望",
	cls:"enter-expect"
}
addSection(objExpect,expectData);

// mydemo
var oMrDemo = document.querySelector(".mr-demo");
var oAddDemo = document.querySelector(".addDemo");
var innerDemo = "";
	innerDemo += '<div class="context"><span>作品名称：</span><input type="text" name="demoname" class="input">';
	innerDemo += '<div class="context"><span>作品链接：</span><input type="text" name="demolink" class="input"></div>';
	innerDemo += '<div class="context"><span>作品说明：</span><textarea class="textarea input"></textarea></div>';

var objDemo = {
	oMain:oMrDemo,
	oAdd:oAddDemo,
	innerh:innerDemo,
	title:"添加作品展示",
	cls:"enter-demo"
}
addSection(objDemo,demoData);
</script>
</html>